<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="时间类型" prop="time_type">
					<el-select v-model="state.queryParams.time_type">
						<el-option label="昨日" :value="1" />
						<el-option label="今日" :value="2" />
						<el-option label="最近7天" :value="3" />
						<el-option label="最近30天" :value="4" />
						<el-option label="本月" :value="5" />
						<el-option label="上月" :value="6" />
						<el-option label="今年" :value="7" />
						<el-option label="去年" :value="8" />
						<el-option label="指定时间段" :value="9" />
					</el-select>
				</el-form-item>
				<el-form-item label="时间段" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="daterange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:default-time="state.defaultTime"
						:disabled="state.queryParams.time_type === 9 ? false : true"
					/>
				</el-form-item>
				<el-form-item label="商品名称" prop="goods_title">
					<el-input v-model="state.queryParams.goods_title" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="关联供应商" prop="supplier_id">
					<el-select
						v-model="state.queryParams.supplier_id"
						clearable
						placeholder="请输入关键字/选择供应商"
						filterable
						remote
						:remote-method="supplierIdRemoteMethod"
						remote-show-suffix
						:loading="state.supplierIdSelect.loading"
						@focus="onSupplierIdFocus"
					>
						<el-option v-for="item in state.supplierIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="商品名称" align="center" prop="goods_title" />
				<el-table-column label="商品信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								商品编号：{{ row.goods_id }}<br />
								商品规格：{{ row.option_name }}<br />
								商品类型：{{ row.goods_type === 1 ? '普通商品' : '礼品商品' }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="关联供应商" align="center" prop="supplier_name" width="100" />
				<el-table-column label="付款订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.order_total_amt }}<br />
								订单数：{{ row.order_total_num }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="已关闭订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ floatSub(row.order_total_amt, row.real_order_total_amt) }}<br />
								订单数：{{ floatSub(row.order_total_num, row.real_order_total_num) }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="有效订单信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								金额：{{ row.real_order_total_amt }}<br />
								订单数：{{ row.real_order_total_num }}<br />
								货款：{{ row.supplier_cost }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="平台服务费" align="center" prop="service_amt" />
				<el-table-column label="佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								铜牌佣金：{{ row.agent_amt1 }}<br />
								银牌佣金：{{ row.agent_amt2 }}<br />
								金牌佣金：{{ row.agent_amt3 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="培养佣金信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								银牌培养佣金：{{ row.train_amt4 }}<br />
								金牌培养佣金：{{ row.train_amt5 }}<br />
							</div>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="goodsStatistics">
import { inject, onMounted, reactive, ref, watch, nextTick } from 'vue';
import { goodsApi, statisticsApi } from '/@/api';
import { floatSub } from '/@/utils/dictionary';

const Dayjs: any = inject('dayjs');
const GoodsApi = goodsApi();
const StatisticsApi = statisticsApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		time_type: 1,
		time: [] as any,
		type: '',
		keyword: '',
		start_date: '',
		end_date: '',
		goods_title: '',
		supplier_id: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	supplierIdSelect: {
		loading: false,
		options: [] as any,
	},
	defaultTime: [new Date(Dayjs().year(), Dayjs().month(), Dayjs().date()), new Date(Dayjs().year(), Dayjs().month(), Dayjs().date())],
});
const queryFormRef = ref();

onMounted(() => {
	getList();
});

watch(
	() => state.queryParams.time_type,
	(e) => {
		state.queryParams.keyword = '';
		state.queryParams.start_date = '';
		state.queryParams.end_date = '';
		switch (e) {
			case 1:
				const start_time1 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				const end_time1 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				state.queryParams.time = [start_time1, end_time1];
				state.queryParams.type = 'day';
				state.queryParams.keyword = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				break;
			case 2:
				const start_time2 = Dayjs().format('YYYY-MM-DD');
				const end_time2 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time2, end_time2];
				state.queryParams.type = 'day';
				state.queryParams.keyword = Dayjs().format('YYYY-MM-DD');
				break;
			case 3:
				const start_time3 = Dayjs().subtract(7, 'day').format('YYYY-MM-DD');
				const end_time3 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time3, end_time3];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time3;
				state.queryParams.end_date = end_time3;
				break;
			case 4:
				const start_time4 = Dayjs().subtract(30, 'day').format('YYYY-MM-DD');
				const end_time4 = Dayjs().format('YYYY-MM-DD');
				state.queryParams.time = [start_time4, end_time4];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time4;
				state.queryParams.end_date = end_time4;
				break;
			case 5:
				const start_time5 = Dayjs().startOf('month').format('YYYY-MM-DD');
				const end_time5 = Dayjs().endOf('month').format('YYYY-MM-DD');
				state.queryParams.time = [start_time5, end_time5];
				state.queryParams.type = 'month';
				state.queryParams.keyword = Dayjs().startOf('month').format('YYYY-MM');
				break;
			case 6:
				const start_time6 = Dayjs().subtract(1, 'months').startOf('month').format('YYYY-MM-DD');
				const end_time6 = Dayjs().subtract(1, 'months').endOf('month').format('YYYY-MM-DD');
				state.queryParams.time = [start_time6, end_time6];
				state.queryParams.type = 'month';
				state.queryParams.keyword = Dayjs().subtract(1, 'months').startOf('month').format('YYYY-MM');
				break;
			case 7:
				const start_time7 = Dayjs().startOf('year').format('YYYY-MM-DD');
				const end_time7 = Dayjs().endOf('year').format('YYYY-MM-DD');
				state.queryParams.time = [start_time7, end_time7];
				state.queryParams.type = 'year';
				state.queryParams.keyword = Dayjs().startOf('year').format('YYYY');
				break;
			case 8:
				const start_time8 = Dayjs().subtract(1, 'years').startOf('years').format('YYYY-MM-DD');
				const end_time8 = Dayjs().subtract(1, 'years').endOf('years').format('YYYY-MM-DD');
				state.queryParams.time = [start_time8, end_time8];
				state.queryParams.type = 'year';
				state.queryParams.keyword = Dayjs().subtract(1, 'years').startOf('years').format('YYYY');
				break;
			case 9:
				const start_time9 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				const end_time9 = Dayjs().subtract(1, 'day').format('YYYY-MM-DD');
				state.queryParams.time = [start_time9, end_time9];
				state.queryParams.type = 'days';
				state.queryParams.start_date = start_time9;
				state.queryParams.end_date = end_time9;
				break;
		}
	},
	{
		immediate: true,
	}
);

/********** 触发事件 **********/
// 关联供应商获取焦点
const onSupplierIdFocus = () => {
	if (state.queryParams.supplier_id) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10 });
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	nextTick(() => {
		onQuery();
	});
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	if (state.queryParams.time_type === 9) {
		state.queryParams.start_date = state.queryParams.time[0];
		state.queryParams.end_date = state.queryParams.time[1];
	}
	_goodsStatistics(state.queryParams);
};
// 关联供应商搜索选择
const supplierIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10, title: query });
};

/********** 网络事件 **********/
// 选择供应商
const _goodsSelectSupplier = (params: Object) => {
	state.supplierIdSelect.loading = false;
	GoodsApi.goodsSelectSupplier(params)
		.then((res) => {
			state.supplierIdSelect.options = res.data.list;
		})
		.catch(() => (state.supplierIdSelect.loading = false));
};
// 商品统计
const _goodsStatistics = (params: Object) => {
	StatisticsApi.goodsStatistics(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
</script>
